<template>
  <div class="calendar-list-container">

        <template slot-scope="scope">
          <!--渲染价格日历calendar组件 -->
          <el-calendar
            v-loading="calendarLoad"
            element-loading-text="loading"
          >
            <template
              slot="dateCell"
              slot-scope="{date, data}"
            >
              <!--今日及之后的价格可设置setPrice,这里不够优雅 -->
              <div
                :class="nowDay <= data.day.replace(/-/g, '')? 'calendar-div' : 'calendar-div calendar-prev'"
                @click="nowDay <= data.day.replace(/-/g, '') && setPrice(data, date)"
              >
                <div>{{ data.day.slice(-2) }}</div>
                <div
                  v-if="data.type == 'current-month' && refreshPrice(data)"
                  class="price "
                >
                  预订价：{{ priceList[data.day.slice(-2) -1] }}元
                </div>
              </div>
            </template>
          </el-calendar>
        </template>


    <el-dialog
      title="设置价格"
      :visible.sync="dialogPriceVisible"
    >
      <el-form
        class="small-space"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 500px; margin-left:50px;"
      >
        <el-form-item label="名称">
          <el-input
            v-model="temp.name"
            disabled
          />
        </el-form-item>
        <el-form-item label="时间段">
          <el-date-picker
            v-model="temp.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerBeginDateBefore"
          />
        </el-form-item>

        <el-form-item
          label="分时计价"
          prop="is_part"
          required
        >
          <el-radio
            v-model="temp.is_part"
            :label="0"
          >
            不分平时周末
          </el-radio>
          <el-radio
            v-model="temp.is_part"
            :label="1"
          >
            区分周末
          </el-radio>
        </el-form-item>
        <el-form-item label="平时价">
          <el-input v-model="temp.normal_price" />
        </el-form-item>

        <el-form-item
          v-if="temp.is_part == 1"
          label="周末价"
        >
          <el-input v-model="temp.week_price" />
        </el-form-item>
      </el-form>

      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogPriceVisible = false">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="putPrice"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import api from "../../../../axios/api"

  export default {
    name: "index",
    data() {
      return {
        pickerBeginDateBefore:{
          disabledDate(time) {
            return time.getTime() < Date.now() - 86400*1000;
          }
        },
        schedule: [],
        list: [],
        dialogPriceVisible: true,
        dialogFormVisible: false,
        priceDate: '2021-04-26',
        nowDate: 1,
        nowMonth: 1,
        nowDay: 0,
        nowYear: 2020,
        calendarMonth: 1,
        priceList: [],
        expands: [],//只展开一行放入当前行id
        room: {},
        listLoading:false,
        calendarLoad: false,
        temp : ""
      };
    },
    created() {
      this.priceDate = new Date();
      this.nowDate = this.priceDate.getDate();
      this.nowMonth = this.priceDate.getMonth();
      this.calendarMonth = this.nowMonth;
      this.nowYear = this.priceDate.getFullYear();
      this.nowDay = this.priceDate.getFullYear()*10000+ (1+this.priceDate.getMonth())*100+ this.priceDate.getDate();
    },
    methods: {
      refreshPrice (data) {
        // console.log(data);
        if (!data.isSelected) {
          return true;
        }
        if (data.day.slice(5, 7) == this.calendarMonth + 1) {
          return true;
        }
        this.calendarMonth = data.day.slice(5, 7) - 1;
        var that = this;
        getRoomPrice(that.room.id, {'date': data.day}).then(response => {
          var arr = [];
          response.data.priceList.forEach((item,index,array)=>{
            arr[index] = item? item : that.room.price;
          })
          that.priceList = arr
        });
        that.$forceUpdate()
      },
      getRowKeys(row) {
        // console.log(row.id)
        return row.id   //这里看这一行中需要根据哪个属性值是id
      },
      selectDate(type) {
        // consoloe.log(type)
      },
      expandChange(row, expandedRows) {
        // console.log(this.expands)
        var that = this;
        that.room = row;
        // 每次只展开一行
        if (expandedRows.length) {
          that.calendarLoad = true;
          getRoomPrice(row.id, {'date': this.priceDate}).then(response => {
            that.calendarLoad = false;
            var arr = [];
            response.data.priceList.forEach((item,index,array)=>{
              arr[index] = item? item : row.price;
            })
            that.priceList = arr
            that.expands = [row.id]
          });
        } else {
          // 收起价格日历
          that.expands = []
        }
      },
      setPrice(data, date) {
        if (this.nowDay > data.day.replace(/-/g, '')) {
          return false;
        }
        var that = this;
        this.temp = {
          name: that.room.name,
          date: [date, date],
          is_part: 0,
        };
        this.dialogPriceVisible = true;
      },
      // 价格调整
      putPrice() {
        this.dialogPriceVisible = true;
        setRoomPrice(this.room.id, this.temp).then(res => {
          if (res.code == 0) {
            this.$message.success("编辑成功");
            this.dialogPriceVisible = !this.dialogPriceVisible;
            var that = this;
            getRoomPrice(that.room.id, {'date': this.temp.date[0]}).then(response => {
              var arr = [];
              response.data.priceList.forEach((item,index,array)=>{
                arr[index] = item? item : that.room.price;
              })
              that.priceList = arr
            });
            fetchList(that.params).then(response => {
              that.list = response.data;
            });
            that.resetTemp();
            that.$forceUpdate()
          } else {
            this.$message.error(res.msg);
          }
        });
      },
      // 用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
      handleCheck(row) {
        const $table = this.$refs.table
        $table.toggleRowExpansion(row)
      }
      ,
      setDataFromAxios:function(){
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/scheduleData",null,"post")
          .then(res=>{this.room = res.data});//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      leagueChange:function(index){
        this.num = index;
      }
    },
    //vue init方法 当前页面初始化就自动执行的方法 一般用于页面初始化就读取数据
    created:function () {
      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
    }
  };
</script>
